
import * as PIXI from 'pixi.js';
import Rect from 'components/rect';
import Image from 'components/image';
import StickModal from './stickModal';
import WoodenBoxModal from './woodenBoxModal';
import ItemModal from './itemModal';
import ShakeOctopusModal from './shakeOctopusModal';
import GhostModal from './ghostModal';
import PasswordModal from './passwordModal';
import AmethystBoxModal from './amethystBoxModal';
const { Container } = PIXI;

export default class Modal {
  constructor({box, CONST, parent, store, onGetItem, notHidden = false}) {

    this.CONST = CONST;
    this.parent = parent;
    this.store = store;
    this.notHidden = notHidden;

    this.container = new Container();

    this._renderMask(box.smallContent);
    if (box.twoContent) this._renderMask(box.smallContent, box.tewContentTop, box.tewContentSmall);
    this._renderContent(box, onGetItem);
  }

  _renderMask = (small = false, top = 0, tewContentSmall = false) => {
    const { width, height, background, content, smallContent, XSmallContent } = this.CONST;

    let mask = new Rect({left: 0, top: 0, width, height, fill: background});
    mask.alpha = 0;
    mask.interactive = true;
    mask.on('tap', (e) => {
      e.stopped = true; // 阻止事件冒泡
      if (!this.notHidden) this.container.parent.removeChild(this.container);
      ReactDom.unmountComponentAtNode(document.getElementById('promptBox'));
    });
    let src = small ? smallContent.src : content.src;
    let bgWidth = small ? smallContent.width : content.width;
    let bgHeight = small ? smallContent.height : content.height;
    let left = small ? (width - smallContent.width) / 2 : (width - content.width) / 2;
    let bgTop = small ? smallContent.top + top : content.top + top;
    if (tewContentSmall) {
      src = XSmallContent.src;
      bgWidth = XSmallContent.width;
      bgHeight = XSmallContent.height;
      left = (width - XSmallContent.width) / 2;
      bgTop = XSmallContent.top + top;
    }

    let contentBg = new Image({
      src,
      width: bgWidth,
      height: bgHeight,
      left,
      top: bgTop,
    });
    // contentBg.interactive = true;
    // contentBg.on('tap', (e) => {
    //   e.stopped = true;
    // });

    this.container.addChild(mask);
    this.container.addChild(contentBg);
  };

  _renderContent(box, onGetItem, hasGet) {

    const { content } = this.CONST;

    this.modal = null;

    switch (box.key) {
      case 'stick': {
        this.modal = new StickModal({parent: this, box, onGetItem, ...content});
        break;
      }
      case 'woodenBox': {
        this.modal = new WoodenBoxModal({parent: this, box, onGetItem, ...content});
        break;
      }
      case 'octopus': {
        this.modal = hasGet ?
          new ItemModal({parent: this, box, onGetItem, ...content}) :
          new ShakeOctopusModal({parent: this, box, onGetItem, ...content});
        break;
      }
      case 'ghost': {
        this.modal = new GhostModal({parent: this, box, onGetItem, ...content});
        break;
      }
      case 'chest': {
        this.modal = hasGet ?
          new ItemModal({parent: this, box, onGetItem, ...content}) :
          new PasswordModal({parent: this, box, onGetItem, ...content});
        break;
      }
      case 'amethystBox': {
        this.modal = new AmethystBoxModal({parent: this, box, onGetItem, ...content});
        break;
      }
      default: {
        this.modal = new ItemModal({parent: this, box, onGetItem, ...content});
        break;
      }
    }

    this.container.addChild(this.modal.container);

  }
}
